<template>
  <div class="appendForm-container common-container">
    <div class="appendForm-content">
      <el-form
        class="domains-form"
        ref="formRef"
        label-width="120px"
        :model="dynamicValidateForm"
      >
        <el-row
          v-for="(domain, index) in dynamicValidateForm.domains"
          :gutter="20"
          :key="domain.key"
        >
          <el-col :span="10">
            <el-form-item
              :label="'Domain' + index"
              :prop="'domains.' + index + '.name'"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'blur',
              }"
            >
              <el-input v-model="domain.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              :label="'Domain' + index"
              :prop="'domains.' + index + '.value'"
              :rules="{
                required: true,
                message: 'domain can not be null',
                trigger: 'blur',
              }"
            >
              <el-input v-model="domain.value"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button icon="el-icon-plus" @click.prevent="addDomain" v-if="index == 0"></el-button>
            <el-button icon="el-icon-minus" @click.prevent="removeDomain(domain)" v-else></el-button>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button class="domain-btn" type="primary" @click="submitForm('formRef')">Submit</el-button>
          <el-button class="domain-btn" @click="resetForm('formRef')">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return{
      dynamicValidateForm:{
        domains: [
          {
            key: 1,
            value: '',
            name:''
          },
        ],
      },
    }
  },
  methods:{
    addDomain(){
      const domain = {
        key: new Date().getTime(),
        value: '',
        name: '',
      }
      this.dynamicValidateForm.domains.push(domain)
    },
    removeDomain(domain){
      const index = this.dynamicValidateForm.domains.indexOf(domain)
      if(index != -1){
        this.dynamicValidateForm.domains.splice(index,1)
      }
    },
    submitForm(){
      this.$refs['formRef'].validate((valid) =>{
        if(valid){
          this.$message.success('提交成功')
        }
      })
    },
    resetForm(){
      this.$refs['formRef'].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.appendForm-container{
  text-align: left;
  overflow-y: auto;
}
.domain-btn{
  padding: 5px 10px;
}
.domain-btn.el-button--primary{
  background: #62afe3;
  border: 1px solid #62afe3 !important;
}
</style>
